<template>
	<view class="content">
		<view class="box">
			<view class="pay-loading" v-if="loading">
				<image src="http://shoe-orange.laiwang.work/img/loading.gif" mode="heightFix"></image>
				<view class="pay-des">
					<view class="name">支付成功</view>
					<view class="des">
						正在打开柜门，请耐心等待
					</view>
				</view>
			</view>
			<view class="pay-s" v-else>
				<view class="name">
					001号鞋柜已打开
				</view>
				<view class="des">
					山东大学01号鞋柜
				</view>
				
				<image src="http://shoe-orange.laiwang.work/img/wancheng.png" mode=""></image>
				<view class="pay-btn">
					<button class="u-reset-button btn1" @click="shouye">返回首页</button>
					<button class="u-reset-button btn2" @click="seeOrder">查看订单</button>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true
			}
		},
		onLoad() {
			let that = this
			setTimeout(() =>{
				that.loading = false
			},1500)
		},
		methods: {
			shouye(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			seeOrder(){
				uni.switchTab({
					url:'../order/order'
				})
			}
		}
	}
</script>

<style lang="less">
	.content{
		padding:  10rpx 20rpx;
	}
	.box{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		height: calc(100vh - 20rpx );
		border-radius: 10rpx ;
		overflow: hidden;
	}
// 等待
.pay-loading{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image{
		// width: 242rpx;
		// height: 240rpx;
	}
	.pay-des{
		margin-top: -70rpx;
		.name{
			font-size: 48rpx;
			margin-bottom: 14rpx;
			text-align:center;
		}
		.des{
			font-size: 26rpx;
			text-align:center;
			color: #7C7C7C;
		}
	}
}
// 支付成功
.pay-s{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding-top: 99rpx;
	image{
		width: 152rpx;
		height: 152rpx;
		margin-bottom: 80rpx;
	}
	.name{
		font-size: 48rpx;
		margin-bottom: 50rpx;
		line-height: 1;
	}
	.des{
		font-size: 26rpx;
		color: #7C7C7C;
		line-height: 1;
		margin-bottom: 94rpx;
	}
	.pay-btn{
		display: flex;
		align-items: center;
		button{
			width: 210rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			border-radius: 35rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: 0;
		}
		.btn1{
			background: #ECBC2B;
			margin-right: 46rpx;
		}
		.btn2{
			background: #FF9A33;
		}
	}
}
</style>
